<template>
    <div>
        <div class="mainBox">
            <h3>{{examinfo.navsname}}</h3>
            <div>
                <el-button type="primary" @click="addnewexam">新增考试</el-button>
                <el-button type="primary" @click="editprojectbtmanage">编辑项目</el-button>
            </div>
        </div>
        <div style="padding:15px;background:#fff;border-radius: 10px;">
            <el-table
                class="custom-table"
                ref="multipleTable"
                :data="stopexamlist"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                :header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
                <el-table-column
                    prop="name"
                    label="考试名称">
                    <template slot-scope="scope">
                        <span style="color: #2A303B;">
                            {{ scope.row.nav6name?scope.row.nav6name:'--' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="subjectname"
                    label="科目"
                    width="100">
                </el-table-column>
                <el-table-column
                    label="状态"
                    prop="type2name"
                    width="200">
                </el-table-column>
                <el-table-column
                    label="模板绑定">
                    <template slot-scope="scope">
                        <span style="color: #2A303B;">
                            {{ scope.row.itemcasename?scope.row.itemcasename:'--' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="参加学校">
                    <template slot-scope="scope">
                        <span style="color: #2A303B;">
                            {{ scope.row.schoolnum?scope.row.schoolnum:'--' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="IP设置"
                    prop="iconServiceIp">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="210">
                    <template slot-scope="scope">
                        <div style="display: flex;" class="scopednr">
                            <!-- <b @click="modelclick(scope.row)">绑定模板</b> -->
                            <b @click="bindschoollist(scope.row)">绑定学校</b>
                            <b @click="editExamschool(scope.row)">编辑</b>
                            <b @click="deletesubjectmodel(scope.row)">删除</b>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增考试 -->
		<addExam v-if="addexamshow" @addexamclick="addexamclick" :addexamtype="examtype" :examnavid="examnavid" :contenteditam="contenteditam"></addExam>
        <!-- 绑定学校 -->
         <bindSchool v-if="bindSchoolshow" @addexamclickschool="addexamclickschool" :contenteditam="contenteditam"></bindSchool>
         <!-- 编辑项目 -->
		<examEdite v-if="editeExamIshow" @addexameditclick="addexameditclick" :examnavid="examnavid" :addexamtype="examtype"></examEdite>
    </div>
</template>

<script>
import addExam from '../../../components/addexam.vue'
import bindSchool from '../../../components/bindingschools.vue'
import examEdite from '../../../components/exditexam.vue'
import {getExamview,deleteSubjectModel} from '../../../api/api.js'
export default {
    name: 'projectoverview',
    data () {
        return {
            stopexamlist:[
                {
                    name:'[12345]语文',
                    subject:'语文',
                    status:'上传开始',
                    modelname:'250414语文内蒙3卷',
                    schoolname:'北京小学',
                    ipadress:'192.168.1.1',
                }
            ],
            multipleSelection:[],
            addexamshow:false,
            bindSchoolshow:false,
            pageSize:50,
            currentPage:1,
            total:0,
            examinfo:{},
            examtype:1,
            examnavid:'',
            contenteditam:{},
            editeExamIshow:false
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.multipleTable.clearSelection();
        });
        this.examinfo = JSON.parse(sessionStorage.getItem('examContent'))
        this.examnavid = this.examinfo.nav5id
        this.overviewlist(this.examinfo.nav5id)
    },
    computed: {
        examId() {
            return this.$store.state.examId;
        }
    },
    watch: {
    	examId(newVal) {
            if (newVal) {
                this.examnavid = newVal;
                this.overviewlist(newVal);
                this.$store.commit('setExamId', ''); // 重置状态
            }
        }	
    },
    methods: {
        //编辑项目
        editprojectbtmanage(){
            this.editeExamIshow = true
        },
        addexameditclick(){
            this.editeExamIshow = false
        },
        //项目概况列表
        overviewlist(id){
            let obj={navId:id}
            getExamview(obj).then(res=>{
                // console.log(res)
                if(res.code==0){
                    this.stopexamlist = res.obj
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        //新增考试
        addnewexam(){
            this.addexamshow = true
            this.examtype = 1
        },
        addexamclick(){
            this.addexamshow = false
            this.overviewlist(this.examnavid)
        },
        //绑定模板
        modelclick(con){
            this.addexamshow = true
        },
        //编辑考试
        editExamschool(con){
            console.info('contenteditam',con)
            this.addexamshow = true
            this.examtype = 0
            this.contenteditam = con
        },
        // 绑定学校
        bindschoollist(con){
            this.contenteditam = con
            this.bindSchoolshow = true
        },
        addexamclickschool(){
            this.bindSchoolshow = false
        },
        // 单个删除
        deletesubjectmodel(con){
            let obj={
                nav6ids:[con.nav6id]
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteSubjectModel(obj).then(res=>{
                        if(res.code==0){
                            this.overviewlist(this.examinfo.nav5id)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    components: {
        addExam,bindSchool,examEdite
    }
}
</script>

<style scoped>
.mainBox{
    background:#fff;
    margin-bottom:15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:15px;
}
.mainBox >>> .el-button{
    background:#366EF4;
    border:solid 1px #366EF4;
    height:36px;
}
.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
     .el-table .el-table__cell{
        padding:8px 0;
    }
    .scopednr b{
        display: inline-block;
        font-weight:normal;
        margin:0 8px;
        color:#165DFF;
        cursor: pointer;
    }
    .scopednr b:last-child{
        color:#D54941
    }
    .examfooter{
		width:100%;
		height:54px;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
</style>